<template>
  <div>
    <h4>欢迎光临_vue开发的收银系统_水果店</h4>
    <table border="1">
      <tr>
        <td>苹果10￥/斤,折扣8折</td>
      </tr>
      <tr>
        <td>
          请输入你要购买的斤数
          <input v-model="kilogram" type="number" />
        </td>
      </tr>
      <tr>
        <td><button @click="pay">结账买单~</button></td>
      </tr>
      <tr>
        <td>
          结账单:总价:{{ total }}￥元折扣后:{{ 0.8 * total }}￥元省了{{
            0.2 * total
          }}
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total:0,
      kilogram:""
    };
  },

  mounted() {
    
  },

  methods: {
    pay(){
      this.total=10*this.kilogram
    }
  },
};
</script>

<style>
</style>
